<template>
	<view class="">


		<view class="from">

			<uni-forms ref="baseForm" :rules="rules" :modelValue="baseFormData">

				<uni-forms-item label="姓名" required name="name" :labelWidth='100'>
					<uni-easyinput v-model="baseFormData.name" placeholder="请输入" />
				</uni-forms-item>
				<uni-forms-item label="联系方式" required name="phone" :labelWidth='100'>
					<uni-easyinput v-model="baseFormData.phone" placeholder="请输入" />
				</uni-forms-item>
				<uni-forms-item label="投诉建议内容" :labelWidth='100'>
					<uni-easyinput type="textarea" v-model="baseFormData.memo" placeholder="请输入" />
				</uni-forms-item>

				<view class="idCard">
					<!-- <uni-file-picker limit="9" title="最多选择9张图片"></uni-file-picker> -->

					<view class="idCard-des">
						上传图片
					</view>
					<view class="idCard-img">
						<view class="idCard-img-msg" v-for="(item,index) in imgList">
							<image :key="index" :src="item" mode="aspectFit"></image>
							<image class="idCard-img-sc" @click="sctp(index)" src="../../static/com/icon_sc.png"
								mode=""></image>
						</view>

						<!-- v-else -->
						<image style="width: 100rpx;height: 100rpx;" @click="uploadpic" v-if="imgList.length<5"
							src="../../static/com/icon_sctp.png" mode=""></image>
						<!-- <image src="../../../static/com/icon_sctp.png" -->
						<!-- mode=""></image> -->
						<!-- <text style="margin-top: 20rpx;">点击上传图片</text> -->

					</view>
				</view>

			</uni-forms>

		</view>

		<view class="submit">
			<view class="submit-btn" @click="submit('baseForm')">
				提交申请
			</view>

		</view>

	</view>
</template>

<script>
	import {
		getApplyMemApply,
		complaint
	} from '@/api/togeterRich/index.js'
	export default {
		data() {
			return {
				imgList: [],
				idCard: "",
				baseFormData: {
					name: '',
					phone: '',
					memo: ''
				},

				rules: {

					name: {
						rules: [{
							required: true,
							errorMessage: '姓名不能为空'
						}]
					},
					phone: {
						rules: [{
								required: true,
								errorMessage: '手机号不能为空'
							}


						]
					},

				},
			}
		},
		methods: {
			sctp(index) {
				this.imgList.splice(index, 1)
			},
			uploadpic: function() {
				let that = this;
				that.$util.uploadImageOne({
					url: 'user/upload/image',
					name: 'multipart',
					model: "maintain",
					pid: 0,
					count: 5
				}, function(res) {
					that.imgList.push(res.data.url)

				});
			},

			modu(tit, content, confirmText) {
				uni.showModal({
					title: tit,
					content: content,
					showCancel: false,
					cancelText: '',
					confirmText: confirmText,
					success: res => {
						if (confirmText == '返回首页') {
							uni.reLaunch({
								url: '/pages/index/index'
							});

						}
						console.log("成功了")
					},
					fail: () => {},
					complete: () => {}
				});
			},
			submit(ref) {
				let that = this
				// if (this.idCard == '') {
				// 	uni.showToast({
				// 		title: "请上营业执照",
				// 		icon: "none",
				// 		duration: 2000
				// 	})
				// 	return;
				// }
				if (this.imgList.length != 0) {
					this.baseFormData.file = this.imgList
				}
				this.$refs[ref].validate().then(res => {
					complaint(this.baseFormData).then(ress => {

						that.modu("已提交", " ", "返回首页")
					}).catch(err => {
						// that.modu("审核失败", "失败原因:管理后台填写的拒绝原因", "重新申请")
						// console.log('err', err);
					})

				})
			},


		}
	}
</script>

<style lang="scss" scoped>
	.idCard {
		height: 490rpx;
		background: #fff;
		margin-top: 20rpx;

		.idCard-des {
			// text-align: center;
			font-style: 28rpx;
			color: #333;
		}

		.idCard-img {
			.idCard-img-msg {
				position: relative;

				.idCard-img-sc {
					position: absolute;
					width: 40rpx;
					height: 40rpx;
					right: 10px;
					top: -11rpx;
				}
			}

			margin: 20rpx auto;
			display: flex;
			/* justify-content: space-around; */
			/* flex-direction: column; */
			flex-wrap: wrap;
			align-items: center;

			image {
				margin: 10rpx;
				width: 200rpx;
				height: 200rpx;
			}
		}
	}

	.submit {
		position: fixed;
		bottom: 0;
		width: 100%;
		background: #fff;
		padding: 30rpx;

		.submit-btn {
			width: 80%;
			margin: 0 auto;
			background: $maincolor;
			text-align: center;
			line-height: 80rpx;
			color: #fff;
			border-radius: 100rpx;
		}
	}

	.from {
		background: #fff;
		width: 100%;
		padding: 30rpx;
		margin: 0 auto;
	}
</style>